<template>
    <div class="container">
        <template v-if="data">
            <img class="hidden-box" v-for="item in images" :key="item.id" width="144px" :src="item" @click="enlargePic"/>
            <template v-if="isDialogShow"></template>
            <el-dialog class="dialog-box" :visible.sync="centerDialogVisible" modal close-on-click-modal custom-class="dialog">
                <el-carousel :autoplay="false" indicator-position="none" arrow="never">
                    <el-carousel-item v-for="item in data" :key="item">
                        <img :src="item">
                    </el-carousel-item>
                </el-carousel>
            </el-dialog>
        </template>
    </div>
</template>

<script>
    export default {
        name: "star-pic-list",
        props: ["data","maxShow"],
        data(){
            return{
                centerDialogVisible: false,
                showPic: '',
                isDialogShow: false,
                index: 0,
            }
        },
        computed: {
          images() {
              if (this.data instanceof Array && this.data.length > 2) {
                  return this.data.splice(0,this.maxShow)
              } else {
                  return this.data
              }
          }
        },
        methods: {
            // 放大图片
            enlargePic(e){
                this.isDialogShow = true;
                this.centerDialogVisible = true;
                this.showPic = this.data[0];
                // console.log(this.images)
            },
        }
    }
</script>

<style lang="scss" scoped>
.dialog-box {
    /deep/ .el-dialog .el-dialog__header{
        padding: none;
        opacity: 0;
    }

}
    /deep/.el-dialog__body {
        padding: 0 0;
    }
</style>